<template>
 <view class="container">
 	<view class="activity-topBg">
		<image style="width: 338upx; height: 240upx;" :src="activityUrl" mode="scaleToFill"></image>
		<view class="tag1">{{activityType}}</view>
		<view class="tag2">{{couponType}}</view>
 	</view>
	<view class="activity-content">
		<view class="title">{{activityTitle}}</view>
		<view>
			<text style="margin-left: 21upx; color: #333333; font-size: 18upx;">距离活动结束还剩</text>
			<text style="margin-left: 12upx; color: #EC4863; font-size: 20upx;">{{finishTime}}</text> 
		</view>
		<view class="applyContent">
			<text style="margin-left: 21upx; color: #333333; font-size: 20upx;">已报名:</text>
			<text style="margin-left: 12upx; color: #EC4863; font-size: 20upx;">{{applyCount + '人'}}</text> 
            <view class="join" @click="joinAction">立即参加</view>
		</view>
	</view>
 </view>
</template>

<script>
	export default {
		name:"home-activity",
		data() {
			return {
				
			}
		},
		
		props:{
			// 活动图片
			activityUrl:{
				type:String,
				default:''
			},
		    // 活动类型
			activityType: {
			   type:String,
			   default:''
			},
			//优惠类型
			couponType: {
				type:String,
				default:''
			},
			//活动标题
			activityTitle: {
				type:String,
				default:''
			},
			//距离活动结束时间
			finishTime: {
				type:String,
				default:''
			},
			//报名人数
			applyCount: {
				type:String,
				default:''
			},
			
		},
		methods: {
			joinAction() {
				this.$emit("joinClick",{activityTitle: this.activityTitle})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		border-radius: 16upx;
		width: 338upx;
		background-color: #FFFFFF;
		.activity-topBg {
			display: inherit;
			flex-direction: column;
			width: 338upx;
			height: 240upx;
			position: relative;
			.tag1 {
				position: absolute;
				left: 10upx;
				top: 10upx;
				background-color: #000000;
				color: #FFD394;
				padding: 12upx 14upx;
				border-radius: 8upx;
				font-size: 20upx;
			}
			.tag2 {
				position: absolute;
				right: 0;
				bottom: 10upx;
				background: linear-gradient(#fffcde 0%, #ffd291 100%);
				border-radius: 8upx 0 0 8upx;
				padding: 9upx 14upx;
				font-size: 20upx;
				
			}
			
		}
		
		.activity-content {
			display: inherit;
			flex-direction: column;
			position: relative;
			background-color: #FFFFFF;
			margin-bottom: 20upx;
			.title {
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: bold;
				margin-left: 20upx;
				margin-top: 28upx;
			}

			.applyContent {
				margin: 20upx 0;
				display: inherit;
				position: relative;
				align-items: center;
				.join {
				  background-color: $main-color;
				  color: #FFFFFF;
				  padding: 10upx 20upx;
				  font-size: 24upx;
				  font-family: PingFang SC, PingFang SC-Medium;
				  font-weight: bold;
				  position: absolute;
				  border-radius: 8upx;
				  right: 20upx;
				}
			}
		}
	}
	
</style>
